<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>echarts</title>
	<script src="./echarts.js"></script>
</head>
<body>
	<div id="main" style="margin-left:600px;width: 600px;height: 600px;border-radius:11px;"></div>
	<script type="text/javascript">
		var my_echarts=echarts.init(document.getElementById('main'));
		// 指定图表的配置项和数据
        option = {
		    backgroundColor: '#2c343c',
		    visualMap: {
		        show: false,
		        min: 80,
		        max: 600,
		        inRange: {
		            colorLightness: [0, 1]
		        }
		    },
		    series : [
		        {
		            name: '访问来源',
		            type: 'pie',
		            radius: '55%',
		            data:[
		                {value:235, name:'视频广告'},
		                {value:274, name:'联盟广告'},
		                {value:310, name:'邮件营销'},
		                {value:335, name:'直接访问'},
		                {value:400, name:'搜索引擎'}
		            ],
		            roseType: 'angle',
		            label: {
		                normal: {
		                    textStyle: {
		                        color: 'rgba(255, 255, 255, 0.3)'
		                    }
		                }
		            },
		            labelLine: {
		                normal: {
		                    lineStyle: {
		                        color: 'rgba(255, 255, 255, 0.3)'
		                    }
		                }
		            },
		            itemStyle: {
		                normal: {
		                    color: '#c23531',
		                    shadowBlur: 200,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            }
		        }
		    ]
		};

        // 使用刚指定的配置项和数据显示图表。
        my_echarts.setOption(option);
    </script>
</body>
</html>